<template>
    <div>
        <div class="review-wrapper">
            <div v-for="item in data" :key="item" class="review">
                <div style="margin-bottom: 4px">
                    <span class="star">{{item.stars}}</span>
                    <span class="profile-name" style="margin-right: 6px">{{item.profileName}}</span>
                    <thumb-up v-if="item.stars > 3" />
                    <thumb-down v-else />
                    <span class="review-title">{{item.title}}</span>
                </div>
                <div class="review-text" :title="item.review">{{item.text}}</div>
                <a :href="item.videoUrl" target="_blank" v-if="item.videoUrl && item.videoThumbnail">
                    <img class="image-btn" style="width: 60px; height: 60px; object-fit: cover; margin-top: 4px" :src="item.videoThumbnail" />
                </a>
            </div>
        </div>
        <!-- <el-pagination
            small
            :total="total"
            class="mt12"
            layout="prev, pager, next"
            @current-change="onPageChange"
        /> -->
    </div>
</template>

<script>
    // import { ElPagination } from 'element-plus'
    import ThumbUp from './ThumbUp.vue'
    import ThumbDown from './ThumbDown.vue'
    export default {
        components: {
            // ElPagination,
            ThumbUp,
            ThumbDown
        },
        props: {
            data: {
                type: Array,
                default: () => []
            },
            total: {
                type: Number,
                default: 0
            },
            nextPageLinkTempl: {
                type: String,
                default: ''
            }
        },
        methods: {
            onPageChange(page) {
                const link = this.$props.nextPageLinkTempl.replaceAll(/PAGE/g, page)
                window.location.href = link
            }
        }
    }
</script>

<style scoped>
</style>